Using Flexible UI Ready-Mades

Table of Contents

Applies To:

Knowledge Management 6.0

Summary

Developing customer flexible UI components is important to extending the standard KM navigation UI with customer-specific functionality. To avoid complex UI element constructions with HTMLB technology, the flexible UI ready-mades concept is introduced, offering simplified usage of predefined ready-to-use components. These small flexible UI components can be used in programming in custom-developed flexible UI components that fasten the entire development process together for the flexible UI.

Prerequisites and Relevant Knowledge Management APIs

A prerequisite for developers starting to use flexible UI ready-mades is an understanding of the concepts described in Repository Framework Concepts (RCO) and advanced knowledge of flexible UI component development and deployment, including CollectionRenderer and ResourceRenderer.

This tutorial describes the use of flexible UI ready-mades in customer flexible UI components. The following Knowledge Management API package is used in the sample implementation:

com.sapportals.wcm.rendering.readymades.*: Contains all ready-mades available for use in customer flexible UI components.

Coding in Detail

Flexible UI ready-mades can be used in different flexible UI components, including CollectionRenderer, ResourceRenderer and PropertyRenderer. They can be directly instantiated within an implemented render() method of a single component.

Each ready-made component is designed for a dedicated IResource object and offers a single function such as rendering a content link or a link to a details dialog box for the IResource in question. Ready-made components offer a single constructor for instantiation. The rendering of a ready-made component is carried out by the flexible UI framework.

This example shows the usage of two different ready-mades in a resource renderer.

Using Ready-Mades in Resource Renderers

The easiest way to call a flexible UI ready-made component is to create a new instance specifying the required parameters:

public Component renderMetaProperty(IMetaName metaName,

    boolean showContentLink) throws WcmException {

        return new MetaPropertyComponent(this.getResource(),

                this.getProxy(), metaName, showContentLink,

    this.getParameters(), this.getResourceState());

Ready-mades can be used as return values for render() methods since they extend the HTML Component class.

Each ready-made needs the IResource object as a mandatory parameter. Within a renderer, this parameter can be retrieved from the getResource() method, which is implemented in the abstract class (AbstractResourceRenderer).

Alternatively, a ready-made can be put into a superordinate HTMLB component:

    GridLayout grid = new GridLayout();

    grid.setWidth("100%");

    grid.setCellPadding(5);

    TextView t = new TextView();

    t.setText(property.getValueAsString());

    ResourceLink link = new ResourceLink(this.getResource(),

        t, this.getProxy(),

        this.getParameters()

);

    grid.addComponent(1, 1, link);

Methods available in renderers to return ready-made components for rendering:

Method	Purpose
renderMetaProperty()	Renders a single property specified by the meta property parameter.
render()	Renders different aspects from a resource object. These methods should return a valid HTMLB component.

Available Ready-Mades

Currently the following ready-made components of the package com.sapportals.wcm.rendering.readymades.* are available for usage:

Component	Purpose
MenuBarComponent	Renders a menu bar that shows a number of command groups that will operate on the given resource or - in case of mass commands - on the list of selected resources.
MetaPropertyComponent	Renders a single property of a resource specified by the meta-name of the property.
PropertyComponent	Renders a single property of a resource specified by the property object itself.
ResourceDetailsLink	Creates a link to the standard details page for the given resource
ResourceImage	Renders either the icon or the image for the given resource, depending on its parameters.
ResourceLink	Renders a link that triggers either navigation to an ICollection or displays the content of an IResource in-place or out-of-place.

Please refer to the latest Javadoc provided in SDN or in the SAP NetWeaver Developer Guide to get additional technical details on the ready-made API calls.

Sample ResourceRenderer using Flexible UI Ready-Mades

The following archive contains a valid and deployable SAP NetWeaver Developer Studio project based on KMC API of NW04 SPS 9, which shows the steps described above in a whole example.

Example com.sap.netweaver.kmc.flexui_readymade.zip